<template>
  <div class="photo-select">
    <div class="icon-box" :class="[dropEnterClass]" @drop="drop" @dragenter="dragenter" @dragleave="dragleave">
      <el-icon size="80px">
        <Plus />
      </el-icon>
      <input @change="drop" class="file-input" type="file" accept="image/jpeg,image/jpg" title="" />
    </div>
    <p class="desc">请先选择一张照片，或拖拽一张照片到上方框内</p>
    <p class="tips">仅支持JPG/JPEG格式</p>
  </div>
  <div class="file-load-modal" v-show="loading">
    <div class="progress-main">
      <el-progress :percentage="100" :stroke-width="12" :duration="30" striped-flow striped />
      <div class="desc">正在载入照片...</div>
    </div>
  </div>
</template>

<script setup>
  const electron = require('electron')
  import { ElMessageBox } from 'element-plus'
  import { onMounted, ref, defineEmits, onBeforeUnmount} from 'vue'

  const $emit = defineEmits(['success'])
  const dropEnterClass = ref('') // 拖拽样式
  const loading = ref(false)

  // 禁用调浏览器默认的拖拽事件
  const preventDefault = e => {
    e.preventDefault()
  }
  
  onMounted(() => {
    //拖离
    document.addEventListener('dragleave', preventDefault)
    //拖后放
    document.addEventListener('drop', preventDefault)
    //拖进
    document.addEventListener('dragenter', preventDefault)
    //拖来拖去
    document.addEventListener('dragover', preventDefault)
    // 清除缓存
    electron.webFrame.clearCache()
  })

  onBeforeUnmount(() => {
    //拖离
    document.removeEventListener('dragleave', preventDefault)
    //拖后放
    document.removeEventListener('drop', preventDefault)
    //拖进
    document.removeEventListener('dragenter', preventDefault)
    //拖来拖去
    document.removeEventListener('dragover', preventDefault)
  })

  const drop = e => {
    e.preventDefault()
    dropEnterClass.value = ''
    const fileList =  e.dataTransfer ? e.dataTransfer.files : e.target.files
    if(fileList.length === 0 || !/\.+(jpg|jpeg)$/gi.test(fileList[0].name)){
      return false
    }
    if (fileList.length > 1) {
      ElMessageBox.alert('只能导入一张照片！', '提示', {
        showConfirmButton: true,
        confirmButtonText: '确定',
        showClose: false,
        callback() {
          
        }
      })
      return
    }
    loading.value = true
    const file = fileList[0]
    const img = new Image()
    img.src = window.URL.createObjectURL(file)
    img.onload = () => {
      loading.value = false
      window.URL.revokeObjectURL(img.src)
      $emit('success', {
        file,
      })
    }
    e.target.value = ''
  }


  const dragenter = e => {
    e.preventDefault()
    dropEnterClass.value = 'drag-enter'
  }

  const dragleave = e => {
    e.preventDefault()
    dropEnterClass.value = ''
  }
</script>

<style lang="less" scoped>
  .photo-select {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .icon-box {
      width: 240px;
      height: 240px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      border: 1px dashed #fff;
      overflow: hidden;
      &:hover,&.drag-enter {
        border-color: #409EFF;
        color: #409EFF;
      }
    }
    .file-input {
      position: absolute;
      right: 0;
      bottom: 0;
      font-size: 300px;
      opacity: 0;
      cursor: pointer;
    }
    .desc {
      padding-top: 30px;
    }
    .tips {
      padding-top: 10px;
      font-size: 12px;
    }
  }
  .file-load-modal {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgba(0,0,0,0.85);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .progress-main {
    width: 500px;
    :deep(.el-progress__text) {
      display: none;
    }
    .desc {
      text-align: center;
      padding: 20px;
    }
  }
</style>
